<template>
  <div class="draw-tabs">
    <el-tabs v-model="activePage" @tab-click="handleClick">
      <el-tab-pane label="图元" name="first">
        <el-button class="point" :class="{current:actionType===0}" @click="drawPiont(0)">
          <div class="dec">点</div>
        </el-button>
        <el-button class="line" :class="{current:actionType===1}" @click="drawLine(1)">
          <div class="dec">线</div>
        </el-button>
        <el-button class="surface" :class="{current:actionType===2}" @click="drawPolygon(2)">
          <div class="dec">面</div>
        </el-button>
        <el-button class="circle" :class="{current:actionType===3}" @click="drawCircle(3)">
          <div class="dec">圆</div>
        </el-button>
        <el-button class="oval" :class="{current:actionType===4}" @click="drawEllipse(4)">
          <div class="dec">椭圆</div>
        </el-button>
        <el-button class="rectangle" :class="{current:actionType===5}" @click="drawExtent(5)">
          <div class="dec">矩形</div>
        </el-button>
        <el-button class="word" :class="{current:actionType===6}" @click="drawText(6)">
          <div class="dec">文字</div>
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="属性" name="second">
        <div class="pointForm" v-if="groundForm">
          <el-form label-position="right" label-width="80px" :model="groundForm">
            <el-form-item label="填充色">
              <el-color-picker v-model="groundForm.color" size="small" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="图片" v-if="groundForm.hasOwnProperty('image')">
              <el-radio-group v-model="groundForm.image" size="mini">
                <el-radio-button :label="$refs.img1">
                  <span class>
                    <img src="/images/draw/circle2.png" class="pic" alt ref="img1" />
                  </span>
                </el-radio-button>
                <el-radio-button :label="$refs.img2">
                  <span class>
                    <img src="/images/draw/word2.png" class="pic" alt ref="img2" />
                  </span>
                </el-radio-button>
                <el-radio-button :label="$refs.img3">
                  <span class>
                    <img src="/images/draw/oval2.png" class="pic" alt ref="img3" />
                  </span>
                </el-radio-button>
                <el-radio-button :label="$refs.img4">
                  <span class>
                    <img src="/images/draw/rectangle2.png" class="pic" alt ref="img4" />
                  </span>
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="大小" v-if="groundForm.hasOwnProperty('scale')">
              <el-input-number
                v-model="groundForm.scale"
                controls-position="right"
                @change="handleChange"
                size="small"
                :step="0.1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="文字内容" v-if="groundForm.hasOwnProperty('text')">
              <el-input v-model="groundForm.text" size="small"></el-input>
            </el-form-item>
            <el-form-item label="字号" v-if="groundForm.hasOwnProperty('fontSize')">
              <el-input-number
                v-model="groundForm.fontSize"
                controls-position="right"
                size="small"
                :min="12"
                :step="0.5"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体" v-if="groundForm.hasOwnProperty('fontFamily')">
              <el-radio-group v-model="groundForm.fontFamily" size="mini">
                <el-radio-button label="黑体">黑体</el-radio-button>
                <el-radio-button label="宋体">宋体</el-radio-button>
                <el-radio-button label="楷体">楷体</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="线宽" v-if="groundForm.hasOwnProperty('width')">
              <el-input-number
                v-model="groundForm.width"
                controls-position="right"
                size="small"
                :min="1"
                :step="0.5"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="线型" v-if="groundForm.hasOwnProperty('lineType')">
              <el-radio-group v-model="groundForm.lineType" size="mini">
                <el-radio-button label="Color">普通</el-radio-button>
                <el-radio-button label="PolylineGlow">发光</el-radio-button>
                <el-radio-button label="PolylineDash">虚线</el-radio-button>
                <el-radio-button label="PolylineOutline">带外衬色</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="边框线"
              v-if="targetType==='GroundCircle'||targetType==='GroundRectangle'||targetType==='GroundEllipse'||targetType==='GroundPolygon'"
            >
              <el-color-picker v-model="groundForm.outlineColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item
              label="边框线宽度"
              v-if="targetType==='GroundCircle'||targetType==='GroundRectangle'||targetType==='GroundEllipse'||targetType==='GroundPolygon'"
            >
              <el-input-number
                v-model="groundForm.outlineWidth"
                controls-position="right"
                size="small"
                :min="0"
                :step="0.5"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="外衬色" v-if="targetType==='Text'">
              <el-color-picker v-model="groundForm.outlineColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item
              label="外衬色"
              v-else-if="targetType==='GroundPolyline' && groundForm.lineType==='PolylineOutline'"
            >
              <el-color-picker v-model="groundForm.outlineColor" show-alpha size="small"></el-color-picker>
            </el-form-item>
            <el-form-item label="外衬线宽度" v-if="targetType==='Text'">
              <el-input-number
                v-model="groundForm.outlineWidth"
                controls-position="right"
                size="small"
                :min="0"
                :step="0.5"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="外衬线宽度"
              v-else-if="targetType==='GroundPolyline' && groundForm.lineType==='PolylineOutline'"
            >
              <el-input-number
                v-model="groundForm.outlineWidth"
                controls-position="right"
                size="small"
                :min="0"
                :step="0.5"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="发光强度" v-if="groundForm.lineType==='PolylineGlow'">
              <el-input-number
                v-model="groundForm.glowPower"
                controls-position="right"
                size="small"
                :min="0"
                :step="0.01"
                :max="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="单位长度" v-if="groundForm.lineType==='PolylineDash'">
              <el-input-number
                v-model="groundForm.dashedLength"
                controls-position="right"
                size="small"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="实线比例" v-if="groundForm.lineType==='PolylineDash'">
              <el-input-number
                v-model="groundForm.dashedScale"
                controls-position="right"
                size="small"
                :min="0"
                :max="1"
                :step="0.1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="半径" v-if="groundForm.hasOwnProperty('radius')" class="lengthen">
              <el-input-number
                v-model="groundForm.radius"
                controls-position="right"
                size="small"
                :min="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="长半轴"
              v-if="groundForm.hasOwnProperty('semiMajorAxis')"
              class="lengthen"
            >
              <el-input-number
                v-model="groundForm.semiMajorAxis"
                controls-position="right"
                size="small"
                :min="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="短半轴"
              v-if="groundForm.hasOwnProperty('semiMinorAxis')"
              class="lengthen"
            >
              <el-input-number
                v-model="groundForm.semiMinorAxis"
                controls-position="right"
                size="small"
                :min="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="旋转角度"
              v-if="targetType==='GroundEllipse' && groundForm.hasOwnProperty('rotation')"
              class="lengthen"
            >
              <el-input-number v-model="groundForm.rotation" controls-position="right" size="small"></el-input-number>
            </el-form-item>
            <el-form-item
              label="经度坐标"
              v-if="targetType==='Marker' || targetType==='Text'"
              class="lengthen"
            >
              <el-input-number
                v-model="groundForm.position.lon"
                controls-position="right"
                size="small"
                :min="-180"
                :max="180"
                placeholder="经度"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="维度坐标"
              v-if="targetType==='Marker' || targetType==='Text'"
              class="lengthen"
            >
              <el-input-number
                v-model="groundForm.position.lat"
                controls-position="right"
                size="small"
                :min="-180"
                :max="180"
                placeholder="维度"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              label="圆心经度"
              v-if="targetType==='GroundCircle' || targetType==='GroundEllipse'"
              class="lengthen"
            >
              <el-input-number
                v-model="groundForm.center.lon"
                controls-position="right"
                size="small"
                :min="-180"
                :max="180"
                placeholder="经度"
              >经度</el-input-number>
            </el-form-item>
            <el-form-item
              label="圆心维度"
              v-if="targetType==='GroundCircle' || targetType==='GroundEllipse'"
              class="lengthen"
            >
              <el-input-number
                v-model="groundForm.center.lat"
                controls-position="right"
                size="small"
                :min="-180"
                :max="180"
                placeholder="维度"
              >维度</el-input-number>
            </el-form-item>
            <el-form-item label="矩形范围" v-if="groundForm.hasOwnProperty('extent')" class="lengthen">
              <el-input-number
                v-model="groundForm.extent.west"
                controls-position="right"
                size="small"
                :min="-180"
                :max="groundForm.extent.east"
                placeholder="经度"
              ></el-input-number>
              <el-input-number
                v-model="groundForm.extent.south"
                controls-position="right"
                size="small"
                :min="-90"
                :max="groundForm.extent.north"
                placeholder="维度"
              ></el-input-number>
              <el-input-number
                v-model="groundForm.extent.east"
                controls-position="right"
                size="small"
                :min="groundForm.extent.west"
                :max="180"
                placeholder="经度"
              ></el-input-number>
              <el-input-number
                v-model="groundForm.extent.north"
                controls-position="right"
                size="small"
                :min="groundForm.extent.south"
                :max="90"
                placeholder="维度"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <div class="tips" v-else style="text-align: center;">请选择图元</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DrawHelper from "@/DrawHelper/DrawHelper.js";
import layerGroupHandle from "@/DrawHelper/layerGroupHandle.js";
export default {
  // Marker 点
  // Text   文字
  // GroundPolyline  线
  // GroundCircle   圆
  // GroundRectangle 矩形
  // GroundEllipse   椭圆
  // GroundPolygon   面
  props: [],
  data() {
    return {
      activePage: "first",
      actionType: null,
      targetType: null,
      groundForm: null,
    };
  },
  methods: {
    handleClick() {},
    handleChange() {},
    drawCallback(primitive, primitives, attribute) {
      if (primitive._scene.id !== viewer.scene.id) {
        new DrawHelper(viewer.scene).stopDrawing();
        primitive.properties.isRight = true;
      } else if (window.rightViewer) {
        new DrawHelper(window.rightViewer.scene).stopDrawing();
      }
      this.$emit(
        "addLeafNode",
        {
          id: primitive.id,
          label: "标绘",
          isLeaf: true,
        },
        primitive
      );
      this.actionType = false;
    },

    createOptions() {
      return {
        id: Cesium.createGuid(),
      };
    },
    createCallbacks() {
      return {
        endCallback: this.drawCallback,
        startEditCallback: this.startEditCallback,
        endEditCallback: this.endEditCallback,
      };
    },
    startEditCallback(obj, geometry) {
      this.groundForm = obj;
      this.targetType = geometry.getType();
      this.activePage = "second";
    },
    endEditCallback(geometry) {
      this.groundForm = null;
    },
    getActiveLayer() {
      let id = this.$parent.activeLayer;
      let pId = this.$parent.activeLayerParent;

      if (!id || !pId) {
        this.$message({
          message: "请设置活跃图层",
          type: "warning",
          offset: 500,
        });
        return false;
      }
      return true;
    },
    drawPiont(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        new DrawHelper(viewer.scene).startDrawingMarker(options, callbacks);
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingMarker(
            options,
            callbacks
          );
      }
    },
    drawLine(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        options.color = "rgba(255,0,0,1)";
        new DrawHelper(viewer.scene).startDrawingPolyline(options, callbacks);
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingPolyline(
            options,
            callbacks
          );
      }
    },
    drawPolygon(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        new DrawHelper(viewer.scene).startDrawingPolygon(options, callbacks);
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingPolygon(
            options,
            callbacks
          );
      }
    },
    drawCircle(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        new DrawHelper(viewer.scene).startDrawingCircle(options, callbacks);
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingCircle(
            options,
            callbacks
          );
      }
    },
    drawEllipse(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        new DrawHelper(viewer.scene).startDrawingEllipse(options, callbacks);
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingEllipse(
            options,
            callbacks
          );
      }
    },
    drawExtent(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        new DrawHelper(viewer.scene).startDrawingExtent(options, callbacks);
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingExtent(
            options,
            callbacks
          );
      }
    },
    drawText(num) {
      this.actionType = num;
      if (this.getActiveLayer()) {
        let options = this.createOptions();
        let callbacks = this.createCallbacks();
        new DrawHelper(viewer.scene).startDrawingTextAnnotation(
          options,
          callbacks
        );
        window.rightViewer &&
          (options.primitives = window.rightViewer.scene.primitives);
        window.rightViewer &&
          new DrawHelper(window.rightViewer.scene).startDrawingTextAnnotation(
            options,
            callbacks
          );
      }
    },
  },
};
</script>

<style lang="scss">
.draw-tabs {
  .el-tab-pane {
    height: 300px;
    overflow: scroll;
  }
  .el-form-item__label {
    color: black;
  }
  .el-form-item {
    margin-bottom: 18px;
  }
  .el-tabs__nav-wrap {
    background-color: #00acc4;
    padding-left: 20px;
    .el-tabs__item {
      color: white;
    }
  }
  .el-tabs__content {
    background-color: #fff;
  }
  .el-button {
    width: 37px;
    height: 37px;
    margin: 25px 47px 0 0;
    position: relative;
    .dec {
      display: none;
      position: absolute;
      top: 125%;
      left: 50%;
      color: black;
      transform: translate(-50%, 0);
    }
  }
  .el-button:hover .dec {
    display: block;
  }
  .point {
    background-image: url("/data/toolBar/点.png");
    background-size: 100% 100%;
    width: 37px;
    height: 40px;
    margin-left: 40px !important;
  }
  .point.current {
    background-image: url("/images/draw/point2.png");
  }
  .line {
    background-image: url("/data/toolBar/线.png");
    width: 37px;
    height: 40px;
    background-size: 100% 100%;
  }
  .line.current {
    background-image: url("/images/draw/line2.png");
  }
  .surface {
    background-image: url("/data/toolBar/面.png");
    width: 37px;
    height: 40px;
    background-size: 100% 100%;
  }
  .surface.current {
    background-image: url("/images/draw/surface2.png");
  }
  .oval {
    background-image: url("/data/toolBar/椭圆.png");
    width: 37px;
    height: 40px;
    background-size: 100% 100%;
  }
  .oval.current {
    background-image: url("/images/draw/oval2.png");
  }
  .rectangle {
    background-image: url("/data/toolBar/矩形.png");
    width: 37px;
    height: 40px;
    background-size: 100% 100%;
  }
  .rectangle.current {
    background-image: url("/images/draw/rectangle2.png");
  }
  .word {
    background-image: url("/data/toolBar/文本.png");
    width: 37px;
    height: 40px;
    background-size: 100% 100%;
    margin-left: 40px !important;
  }
  .word.current {
    background-image: url("/images/draw/word2.png");
  }
  .circle {
    background-image: url("/data/toolBar/圆形.png");
    width: 37px;
    height: 40px;
    background-size: 100% 100%;
    margin-left: 40px !important;
  }
  .circle.current {
    background-image: url("/images/draw/circle2.png");
  }
  .pointForm {
    .el-radio-button__inner {
      color: black;
    }
    .el-radio-button:first-child .el-radio-button__inner {
      border-left: 1px solid #00acc4;
      border-radius: 2px 0 0 2px;
    }
    .el-radio-button__inner {
      // background: rgba(16, 34, 67, 0.5);
      border: 1px solid #00acc4;
    }
    .el-radio-button:last-child .el-radio-button__inner {
      border-radius: 0 2px 2px 0;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      color: #fff;
      background-color: rgba(182, 125, 16, 1);
      border-color: rgba(182, 125, 16, 1);
      -webkit-box-shadow: -1px 0 0 0 rgba(182, 125, 16, 1);
      box-shadow: -1px 0 0 0 rgba(182, 125, 16, 1);
    }
    .el-input--small .el-input__inner {
      border: 1px solid #00acc4;
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      width: 20px;
      background: #fff;
      border: none;
    }
    .el-input-number__increase {
      border-bottom: 1px solid #dcdfe682;
    }
    .pic {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-size: 100% 100%;
      vertical-align: middle;
    }
    .pic1 {
      background-image: url("/images/draw/circle2.png");
    }
    .pic2 {
      background-image: url("/images/draw/word2.png");
    }
    .pic3 {
      background-image: url("/images/draw/word2.png");
    }
    .pic4 {
      background-image: url("/images/draw/word2.png");
    }
    .el-form-item__label {
      width: 96px !important;
    }
    .el-radio {
      margin-right: 13px;
    }
    .el-radio__label {
      padding-left: 3px;
    }
    .el-form-item__content {
      margin-left: 96px !important ;
    }
  }
  .lengthen {
    .el-input-number--small {
      width: 200px;
    }
  }
  .el-tabs__item {
    margin-left: 2px;
    color: #577ba0;
  }
}
</style>